<template>
  <div class="w pt-10">
    <div class="w-card course-info">
      <img :src="courseVO.coverUrl" alt="课程封面" width="350" />
      <div class="content">
        <h1>{{ courseVO.title }}</h1>
        <div class="mt-10">
          <div v-if="courseVO.price == 0" class="price">免费</div>
          <div class="price" v-else>¥{{ courseVO.price }}</div>
          <div class="info_box">
            <div class="courseNum">
              课时：共&nbsp;
              <span class="number">
                {{ courseVO.lessonNum }}
              </span>
              &nbsp;节
            </div>
            <div class="top_list">
              <div class="charts-right">畅销榜第&nbsp;1&nbsp;名</div>
            </div>
          </div>
        </div>
        <!-- 按钮相关 -->
        <div class="btn-box">
          <div class="top">
            <div class="btn" @click="handleBuy()">
              {{ courseVO.price == 0 ? '立即观看' : '立即购买' }}
            </div>
          </div>
          <div class="bottom">
            <svg-icon
              name="peoples"
              class="svg mr-2"
              width="14px"
              height="14px"
            ></svg-icon>
            已有
            <span class="red">381</span>
            人浏览
          </div>
        </div>
      </div>
    </div>
    <div class="mt-10 flex">
      <el-tabs
        v-model="tabActiveName"
        class="tabs w-card"
        @tab-click="handleTabClick"
      >
        <el-tab-pane label="课程介绍" name="course">
          <CourseTab :desc="courseVO.description" />
        </el-tab-pane>
        <el-tab-pane label="目录" name="chapter">
          <ChapterTab :chapterSectionList="courseVO.chapterInfoVOS" />
        </el-tab-pane>
        <el-tab-pane
          :label="`用户评价(${courseVO.commentCount})`"
          name="comment"
        >
          <CommentTab
            :commentList="courseVO.commentVOS"
            :commentCount="courseVO.commentCount"
            @updateCommentTree="updateCommentTree"
          />
        </el-tab-pane>
      </el-tabs>
      <div class="w-card teacher-info">
        <div class="top">
          <img
            class="img"
            :src="courseVO.teacherAvatar"
            alt=""
            width="64"
            height="64"
          />
          <div class="teacher-title">
            <div class="name">{{ courseVO.teacherName }}</div>
            <div class="level">
              <el-tag>
                {{ courseVO.teacherLevel == '0' ? '高级讲师' : '首席讲师' }}
              </el-tag>
            </div>
          </div>
        </div>
        <div class="bottom">{{ courseVO.teacherIntro }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CourseTab from './info/courseTab.vue'
import ChapterTab from './info/chapterTab.vue'
import CommentTab from './info/commentTab.vue'
import { reqCourseAndDespAndTeacherAndChapterAndCommentV2 } from '@/api/course'
import type { CourseVO } from '@/api/course/type'
import { useRoute } from 'vue-router'
import type { TabsPaneContext } from 'element-plus'
import { reqV2CommentTree } from '@/api/comment'

let route = useRoute()
let courseVO = ref<CourseVO>({
  courseId: undefined,
  teacherId: undefined,
  subjectId: undefined,
  subjectPid: undefined,
  title: '',
  price: 0,
  description: undefined,
  lessonNum: undefined,
  coverUrl: undefined,
  buyCount: undefined,
  viewCount: undefined,
  teacherAvatar: undefined,
  teacherName: undefined,
  teacherLevel: undefined,
  teacherIntro: undefined,
  status: '',
  delFlag: '',
  commentCount: 0,
  chapterInfoVOS: [],
  commentVOS: [],
})
let tabActiveName = ref<string>(
  sessionStorage.getItem('tabActiveName') || 'course',
)

const updateCommentTree = async () => {
  let { rows } = await reqV2CommentTree(courseVO.value.courseId as string)
  courseVO.value.commentVOS = rows
  courseVO.value.commentCount = rows?.length
}

const handleTabClick = (tab: TabsPaneContext) => {
  tabActiveName.value = tab.props.name as string
  sessionStorage.setItem('tabActiveName', tabActiveName.value)
}

const getCourseVO = async () => {
  let { data } = await reqCourseAndDespAndTeacherAndChapterAndCommentV2(
    route.params.courseId as string,
  )
  courseVO.value = data
  // console.log(courseVO.value)
}

const handleBuy = () => {
  if (courseVO.value.price == 0) {
    sessionStorage.setItem('tabActiveName', tabActiveName.value)
    tabActiveName.value = 'chapter'
  } else {
    console.log('buy')
  }
}

onMounted(() => {
  getCourseVO()
})
</script>

<style lang="scss" scoped>
.course-info {
  position: relative;
  display: flex;
  .content {
    margin-left: 20px;
    .price {
      font-size: 28px;
      color: #f01414;
      line-height: 32px;
      font-weight: 600;
    }
    .info_box {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #1c1f21;
      line-height: 20px;
      font-weight: 600;
      .courseNum {
        margin-top: 10px;
        .number {
          color: #f20d0d;
          font-weight: 600;
        }
      }
      .top_list {
        background-size: cover;
        background-position: center;
        margin-left: 10px;
        width: 170px;
        height: 26px;
        background-image: url('@/assets/images/top.png');
        .charts-right {
          width: 125px;
          height: 26px;
          margin-left: 42px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          line-height: 26px;
          font-weight: 600;
        }
      }
    }
    .btn-box {
      position: absolute;
      top: 100px;
      right: 50px;
      .top {
        .btn {
          background-image: linear-gradient(
            90deg,
            rgba(255, 0, 105, 0.99) 0,
            #ff7a00 99%
          );
          border-radius: 24px;
          color: #fff;
          display: block;
          width: 160px;
          height: 48px;
          margin-right: 12px;
          font-size: 16px;
          letter-spacing: 0;
          line-height: 48px;
          font-weight: 600;
          text-align: center;
          cursor: pointer;
        }
      }
      .bottom {
        height: 15px;
        display: flex;
        align-items: center;
        margin-top: 12px;
        font-size: 16px;
        color: #1c1f21;
        line-height: 18px;
        .red {
          color: #f20d0d;
          font-weight: 600;
        }
      }
    }
  }
}
.tabs {
  --el-font-size-base: 16px;
  width: 75%;
  margin-right: 10px;
}
.teacher-info {
  width: 25%;
  height: 100%;
  margin-left: 10px;
  .top {
    display: flex;
    margin-bottom: 24px;
    .img {
      border-radius: 12px;
      margin-right: 16px;
    }
    .teacher-title {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name {
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
        color: #00061a;
      }
    }
  }
  .bottom {
    font-size: 14px;
    line-height: 24px;
    color: #667280;
  }
}
</style>
